<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">设置备注和标签</block>
		</cu-custom>
		
		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">备注名</text>
			<input type="text" class="font-sm rounded border bg-gray px-3 mx-2" placeholder="请填写备注名" style="height: 100rpx;" v-model="nickname"/>
		</view>
		
		<view class="flex flex-column">
			<text class="font-sm text-secondary px-3 py-2">标签</text>
			<view class="border bg-gray px-3 flex align-center flex-wrap pt-3 pb-2 mx-2 rounded"  @click="openTagSet">
				<view class="border border-main rounded-circle px-2 py-1 mr-1 mb-1" v-for="(item,index) in tagList" :key="index">
					<text class="font main-text-color">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="m-2 rounded bg-success text-white p-2 text-center" @click="submit">完成</view>
		
	</view>
</template>

<script>
	import auth from '@/components/mixin/auth.js';
	import $H from '@/common/free-lib/request.js';
	export default {
		mixins:[auth],
		data() {
			return {
				id:0,
				nickname:"",
				tagList:[]
			}
		},
		onLoad(e) {
			if(!e.params){
				return this.backToast()
			}
			let params = JSON.parse(e.params)
			console.log('2323232323',params);
			this.id = params.user_id
			this.nickname = params.nickname
			this.tagList = params.tags == '' ? [] : params.tags.split(',')
			uni.$on('updateTag',(e)=>{
				this.tagList = e
			})
		},
		beforeDestroy() {
			uni.$off('updateTag')
		},
		methods: {
			openTagSet(){
				uni.navigateTo({
					url: '../infochat/user-tag-set?detail='+JSON.stringify(this.tagList)
				});
			},
			// 完成
			submit(){
				this.$C.post('/friend/setremarktag/'+this.id,{
					nickname:this.nickname,
					tags:this.tagList.join(',')
				}).then(res=>{
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					uni.navigateBack({
						delta: 1
					});
				})
				// uni.$emit('saveRemarkTag',{
				// 	nickname:this.nickname,
				// 	tagList:this.tagList
				// })
				// uni.navigateBack({
				// 	delta: 1
				// });
			}
		}
	}
</script>

<style>

</style>
